<template>
  <yd-layout class="m-channel">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="我的频道" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
    </yd-navbar>

    <!-- banner -->
    <yd-slider autoplay="3000" v-if="bannerList.length">
      <yd-slider-item v-for="(banner, index) in bannerList" :key="index" @click.native="onToLink(banner)">
        <a href="javascript:;">
          <img v-lazy="banner.path">
        </a>
      </yd-slider-item>
    </yd-slider>

    <channel-floor :floors="channelList" v-if="channelList.length"></channel-floor>
  </yd-layout>
</template>

<script>
  import { apiChannelFloor } from 'js/api'
  import ChannelFloor from './floor'

  export default {
    data() {
      return {
        chId: '',
        channelList: [],
        bannerList: []
      }
    },
    created() {
      this.chId = this.$route.params.id
      apiChannelFloor(this.chId).then(data => {
        const oData = data || {}
        this.channelList = oData.ChannelFloor || []
        this.bannerList = oData.bannerFloor || []
      })
    },
    methods: {
      // 跳转
      onToLink(result) {
        switch (result.type) {
          case 'goodsInfo': // 进入商品详情
            this.$router.push(`/goods/${result.value}`)
            break
          case 'goodsList': // 进入商品列表
            this.$router.push(`/goodslist?keyword=${encodeURIComponent(result.value)}`)
            break
          case 'channel': // 频道
            this.$router.push(`/channel/${result.value}`)
            break
          case 'store': // 进入店铺
            this.$router.push(`/shop/${result.value}`)
            break
          case 'link': // 进入链接
            window.location.href = result.value
            break
          case 'keyWords': // 商品关键字搜索
            this.$router.push(`/search/goods?keyword=${encodeURIComponent(result.value)}`)
            break
          case 'storeSearch': // 搜索店铺
            this.$router.push(`/search/store?keyword=${encodeURIComponent(result.value)}`)
            break
          case 'brandSearch': // 品牌关键字搜索
            this.$router.push(`/search/brand?keyword=${encodeURIComponent(result.value)}`)
            break
          case 'storeList': // 进入店铺列表
            this.$router.push(`/search/store`)
            break
          case 'typeList': // 分类
            this.$router.push('/classify')
            break
        }
      }
    },
    components: {
      ChannelFloor
    }
  }
</script>

<style lang="scss">
  .m-channel {
    .yd-slider {
      height: 3.2rem;
    }
  }
</style>